<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">
        <p>过滤器：格式化文本，实质是一个函数，传进来的是原始数据，返回出去的是格式化之后的数据</p>
        <p>过滤器可以串联使用，后面一个过滤器的原始数据是前一个过滤器的返回值</p>
        <p>价格：{{money | format(2, 'zh') | format2}}</p>
        <div :class="name1 | capitalize">我是一段文字</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 全局注册 要写在实例的前面 实例的外面
        Vue.filter('capitalize', val => {
            return val.toUpperCase()
        })
        let vm = new Vue({
            el: '#div',
            data: {
                money: 2,
                name1: 'aaa'
            },
            // 局部注册
            filters: {
                // 第一个参数是必填的 固定的 就是原始数据，自定义的参数往后排
                format(val, n, type) {
                    if(type === 'zh') {
                        // 中国
                        return '¥' + val.toFixed(n)
                    }else if(type === 'en') {
                        // 美国
                        return '$' + val.toFixed(n)
                    }
                    
                },
                format2(val) {
                    console.log(val);
                    return val+'元'
                }
            }
        })
    </script>
</body>
</html>